import "./style/global.less";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";
import PageLayout from "./Layout";
import { GlobalContext } from "./context";
import useGlobalStore from "./store/globalStore";
import { useEffect } from "react";
import changeTheme from "./utils/changeTheme";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient({
  defaultOptions:{
    queries:{
      refetchOnWindowFocus:false,
      retry:false
    }
  }
});
function Index() {
  const {theme,setTheme} = useGlobalStore((state)=>state)
  const contextValue = {
    theme,
    setTheme,
  }
  useEffect(()=>{
    changeTheme(theme)
  },[theme])

  const router = createBrowserRouter(
    createRoutesFromElements(<Route path="*" element={<PageLayout />} />)
  );
  return (
    <QueryClientProvider client={queryClient}>
      <GlobalContext.Provider value={contextValue}>
        <RouterProvider router={router} />
      </GlobalContext.Provider>
    </QueryClientProvider>
  );
}

createRoot(document.getElementById("root")!).render(<Index />);
